<template>
  <div class="about">
    <my-header class="header">
      <template slot="left">
        <span @click="$router.go(-1)">返回</span>
      </template>
      <template slot="center">
        <h4>我的书架</h4>
      </template>
    </my-header>
    <div class="book-lt">
      <section v-back="$store.state.color" style="color: #fff">
        <h4>正在看</h4>
        <i class="iconfont icon-xiangyoujiantou" @click="run=!run" :style="{transform: run?'rotate(90deg)':''}"></i>
      </section>
      <transition>
        <ul v-show="run" :style="{height:runHeight+'px'}">
          <template v-for="(item, index) in bookList">
            <li :key="index" v-if="item.state == 0">
              <span>{{ item.name }}</span>
              <div>
                <span style="color: red" @click="changeState(index)">标记为已看完</span> |
                <span style="color: #ccc" @click="del(index)">删除图书</span>
              </div>
            </li>
          </template>
        </ul>
      </transition>
    </div>
    <div class="book-lt">
      <section v-back="$store.state.color" style="color: #fff">
        <h4>已完结</h4>
        <i class="iconfont icon-xiangyoujiantou" @click="finish=!finish" :style="{transform: finish?'rotate(90deg)':''}"></i>
      </section>
      <transition>
        <ul v-show="finish" :style="{height:finishHeight+'px'}">
          <template v-for="(item, index) in bookList">
            <li :key="index" v-if="item.state == 1">
              <span>{{ item.name }}</span>
              <div>
                <span style="color: red" @click="changeState(index)">再看一遍</span> |
                <span style="color: #ccc" @click="del(index)">删除图书</span>
              </div>
            </li>
          </template>
        </ul>
      </transition>
    </div>
  </div>
</template>
<script>
import myHeader from "../components/myHeader";
import { mapState, mapMutations } from "vuex";
export default {
  components: { myHeader },
  computed: {
    ...mapState(["bookList"]),
    runHeight(){
      let len = this.bookList.filter(item => item.state == 0).length; // 正在看的书籍的长度
      return 40*len;
    },
    finishHeight(){
      let len = this.bookList.filter(item => item.state == 1).length; // 正在看的书籍的长度
      return 40*len;
    }
  },
  data() {
    return {
      run: false, // 正在看
      finish: false, // 已完结
    };
  },
  methods: {
    ...mapMutations(["changeState", "del"]),
  },
};
</script>
<style lang="scss" scoped>
.about {
  // height: 100%;
  .header {
    margin-bottom: 20px;
  }
  .book-lt {
    ul{
      overflow: hidden;
    }
    section,
    li {
      height: 40px;
      display: flex;
      box-sizing: border-box;
      padding: 0 10px;
      justify-content: space-between;
      align-items: center;
    }
  }
}
.v-enter-active,.v-leave-active {
  transition: all 0.3s linear;
}
.v-leave-to,.v-enter {
  height: 0!important;
  overflow: hidden;
}

</style>
